<template>
  <div>
    <div>
      <div style="padding: 10px">
        <div class="grid-content bg-purple-light" style="text-align: left">
          <el-button @click="OpenDialog =true" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">新增</el-button>
          <el-button @click="EditDialog" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">编辑</el-button>
          <el-button @click="del" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">删除</el-button>
          <div  style="text-align: left">
            <el-dialog title="新增环境" :visible.sync="OpenDialog" style="width: 850px;left: 18%" :close-on-click-modal="false" >
              <el-form v-model="Envform"   class="demo-ruleForm" style="text-align: right">
                <el-form-item label="名称:"  prop="name">
                  <el-input style="width:300px" type="text" v-model="Envform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="IP地址:"  prop="ipaddr">
                  <el-input style="width:300px" type="ipaddr" v-model="Envform.ipaddr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Host配置:" prop="host">
                  <el-input style="width:300px" type="host" v-model="Envform.host" autocomplete="off"></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeForm">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        v-model="multipleSelection"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" stripe:true width="55">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="ipaddr" label="ip地址" width="300">
        </el-table-column>
        <el-table-column prop="host" label="host配置" >
        </el-table-column>
      </el-table>

    </div>
  </div>

</template>

<style>
  .el-table{
    text-align: center;
  }
</style>

<script >

  export default {
        data() {
            return {
              multipleSelection:[],
              OpenDialog:false,
              msg: '环境管理',
              tableData:[],
              Envform:{
                name:'',
                ipaddr:'',
                host:'',
                apiType:1,
                id:'',
              },
              multipleTable:[],
            }
        },
      methods: {
        closeForm: function () {
          this.OpenDialog = false;
          this.$refs.multipleTable.clearSelection();

        },
        addenv: function () {
          this.OpenDialog = true;
        },
        submit: function () {
          this.$axios.post("http://127.0.0.1:8040/api/EditEnv",
            this.Envform
          ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.msg,
                  duration: 1000
                });
              this.Envform.name="";
              this.Envform.host="";
              this.Envform.ipaddr="";
              this.OpenDialog = false;
              this.$refs.multipleTable.clearSelection();
            }
          )
        },
/*
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
*/
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        flush: function () {
          this.$axios.post("http://127.0.0.1:8040/api/GetEnv", {}).then(Response => {
            var data = [];
            for (let i = 0; i < Response.data.length; i++) {
              var obj = {};
              obj.name = Response.data[i].name;
              obj.ipaddr = Response.data[i].ipaddr;
              obj.host = Response.data[i].host;
              obj.id = Response.data[i].id;
              data[i] = obj;
            }
            this.tableData = data;
          })
        },
        //删除
        del: function () {
          let arr = this.multipleSelection;
        if(arr.length == 0){
            this.$notify({
              message: '请先勾选删除项',
              duration: 1000
            })
          } else if(arr.length >1){
            this.$notify({
              message: '只能删除一项',
              duration: 1000
            });
            this.$refs.multipleTable.clearSelection();
          }else {
            this.$axios.post("/api/DelectEnv?id="+arr[0].id,
            ).then(Response => {
                this.flush(),
                  this.$notify({
                    message: Response.data.msg,
                    duration: 1000
                  });
                this.flush();
              }
            )
          }
        },
        //编辑
        EditDialog: function () {
          let arr = this.multipleSelection;
          console.log(arr);
         if(arr.length == 0){
            this.$notify({
              message: '请先勾选',
              duration: 1000
            })
          } else if(arr.length >1){
            console.log(arr.length)
            this.$notify({
              message: '只能编辑一项',
              duration: 1000
            });}else {
              this.$axios.post("/api/GetOneEnv?id=" + arr[0].id
              ).then(Response => {
                this.Envform.name = Response.data.name;
                this.Envform.ipaddr = Response.data.ipaddr;
                this.Envform.host = Response.data.host;
                this.Envform.id = Response.data.id;
              })
              this.Envform.apiType = 2;
              this.OpenDialog = true;
          }

        }
      },

      created:function () {
        this.flush()
      },
    }

</script>
